<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	    <meta content="yes" name="apple-mobile-web-app-capable">
	    <meta content="yes" name="apple-touch-fullscreen">
	    <meta content="black" name="apple-mobile-web-app-status-bar-style">
	    <meta content="telephone=no,email=no" name="format-detection">
	    <meta name="description" content="">
	    <meta name="keywords" content="">
	    <title>直播间-听众</title>
	    <link rel="stylesheet" href="../static/style/room.css">
	</head>

	<body>
		<section class="room-header flex-h">
			<div class="flex-a-i">
				<a href="javascript:void(0);" class="btn-back-home"></a>
			</div>
			<div class="ques-num">
				<div class="arrow"></div>
				<div class="num">11575人次</p></div>
				<div class="click-mask"></div>
				<div class="ques">问题</div>
			</div>
		</section>

		<div class="page page-room">

			<section class="room-main">
				<div class="main-talk">
					<div class="time-now">下午4:10</div>

					<div class="talk-list">

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face01@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">张庆</p>
									<p class="identity flex-a-i">主持人</p>
								</div>
								<div class="desc-text flex-h">
									<div class="text">下面有请今天的嘉宾曹名长为大家培训中欧丰泓沪港深基金业务</div>
									<div class="state flex-a-i flex-v-c">
										<p></p>
									</div>
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-voice voice-white voice-readed flex-h">
									<div class="voice voice-living"></div>
									<div class="time-len">31"</div>
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-text flex-h">
									<div class="text">欢迎大家积极发言</div>
									<div class="state flex-a-i flex-v-c">
										<p></p>
									</div>
								</div>
							</div>
						</article>

						<article class="answer-item">
							<div class="desc-text">主播对李四的提问“基金分红比例如何配置”做了回答</div>
							<div class="desc-voice voice-grey flex-h">
							<!-- <div class="desc-voice flex-h voice-readed"> -->
								<div class="voice"></div>
								<div class="time-len">31"</div>
							</div>
						</article>

					</div>
				</div>

			</section>

		</div>

		<section class="main-gift">
			<ul>
				<li class="flex-h">
					<div class="gift-box">
						<img src="">
					</div>
					<div class="gift-avatar">
						<img src="../static/image/face03@2x.png">
					</div>
				</li>
				<li class="flex-h">
					<div class="gift-box">
						<img src="">
					</div>
					<div class="gift-avatar">
						<img src="../static/image/face04@2x.png">
					</div>
				</li>
				<li class="flex-h">
					<div class="gift-box">
						<img src="">
					</div>
					<div class="gift-avatar">
						<img src="../static/image/face05@2x.png">
					</div>
				</li>
			</ul>
		</section>

		<section class="operate-mask"></section>
		<section class="operate-box">
			<div class="btn-operate"></div>
			<ul>
				<li class="btn-ask">问</li>
				<li class="btn-gift">赏</li>
				<li class="btn-refresh"></li>
			</ul>
		</section>

		<section class="mask-gift" style="display: none;"></section>
		<section class="mask-modal-gift" style="display: none;">
			<h1>现在显示的打赏图标仅供参考</h1>
			<div class="gift-box">
				<ul>
					<li class="selected"><img src=""></li>
					<li><img src=""></li>
					<li><img src=""></li>
					<li><img src=""></li>
					<li><img src=""></li>
					<li><img src=""></li>
					<li><img src=""></li>
					<li><img src=""></li>
				</ul>
				<a href="javascript:void(0);" class="btn-ensure">打赏</a>
			</div>
			<a href="javascript:void(0);" class="btn-close"></a>
		</section>

		<section class="mask-ques" style="display: none;"></section>
		<section class="mask-modal-ques flex-v" id="modal-ask" style="display: none;">
			<div class="btn-box">
				<a href="javascript:void(0);" class="btn-back-room">回到直播</a>
			</div>

			<div class="ques-box ques-ask flex-a-i flex-v">
				<div class="areabox">
					<textarea placeholder="频繁发送与当前直播无关的问题会被主持人禁言哦~"></textarea>
					<a href="javascript:void(0);" class="btn-ask ask-disable" style="display: none;">提问</a>
					<div class="ask-forbid">
						<p>您的提问因违反国家法律法规或直播室规则，<br />现已被主持人禁言。<a href="javascript:void(0);" class="btn-rule">查看直播室规则</a></p>
					</div>
				</div>

				<div class="ask-list flex-a-i flex-v">
					<div class="list-title">我的提问 (2)</div>
					<div class="list-box flex-a-i">
						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face04@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state"></div>
									</div>
								</div>
								<div class="answer">
									<div class="desc-voice voice-grey flex-h">
										<div class="voice"></div>
										<div class="time-len">31"</div>
									</div>
								</div>
							</div>
						</article>

						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face04@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state">审核中</div>
									</div>
								</div>
							</div>
						</article>

						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face04@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state">审核中</div>
									</div>
								</div>
							</div>
						</article>

						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face04@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state">审核中</div>
									</div>
								</div>
							</div>
						</article>

						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face04@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state">审核中</div>
									</div>
								</div>
							</div>
						</article>
					</div>
				</div>
			</div>
		</section>
		<section class="mask-modal-ques flex-v" id="modal-question" style="display: none;">
			<div class="btn-box">
				<a href="javascript:void(0);" class="btn-back-room">回到直播</a>
			</div>

			<div class="ques-box ques-question flex-a-i flex-v">
				<div class="question-list flex-a-i flex-v">
					<div class="list-tab flex-h">
						<div class="tabs">
							<a href="javascript:void(0);" class="btn-ballot active">最多票数</a>
							<a href="javascript:void(0);" class="btn-time">最新发布</a>
							<a href="javascript:void(0);" class="btn-time">我的问题</a>
						</div>
						<div class="flex-a-i">
							<a href="javascript:void(0);" class="btn-ask">我也要提问</a>
						</div>
					</div>
					<div class="tips">投票最多的问题主播会优先回答哦~</div>
					<div class="list-box flex-a-i">
						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face03@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state"></div>
									</div>
								</div>
								<div class="answer">
									<div class="desc-voice voice-grey flex-h">
										<div class="voice"></div>
										<div class="time-len">31"</div>
									</div>
								</div>
								<div class="btn-ballot balloted">
									<p class="num">8</p>
									<p class="text">投票</p>
								</div>
							</div>
						</article>

						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face03@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state"></div>
									</div>
								</div>
								<div class="btn-ballot">
									<p class="num">6</p>
									<p class="text">投票</p>
								</div>
							</div>
						</article>
					</div>
				</div>
			</div>
		</section>

		<section class="mask-live"></section>
		<section class="mask-modal-live">
			<div class="live-box">
				<h1>直播已开始，赶紧收听吧~</h1>
				<a href="#" class="btn-link">查看直播介绍</a>
				<div class="btnbox">
					<a href="javascript:void(0);" class="btn-front">从第一条听</a>
					<a href="javascript:void(0);" class="btn-end">收听最新一条</a>
				</div>
			</div>

			<a href="javascript:void(0);" class="btn-close"></a>
		</section>
		

		
	    <script src='../static/script/lib/jquery.2.0.0.min.js'></script>
		<script>
			$(function() {

				// room header ques-num button
				$('.ques-num .click-mask').on('click', function() {
					$(this).parent().toggleClass('active');
				});

				// room main operate button
				$('.operate-box .btn-operate').on('click', function() {
					$('.operate-mask').fadeToggle();
					$(this).parent().toggleClass('active');
				});

				// room main operate box gift button
				$('.operate-box .btn-gift').on('click', function() {
					$('.mask-gift').fadeIn();
					$('.mask-modal-gift').fadeIn();

					$('.operate-mask').fadeOut();
					$('.operate-box').removeClass('active');
				});

				// gift modal close button
				$('.mask-modal-gift .btn-close').on('click', function() {
					$('.mask-gift').fadeOut();
					$('.mask-modal-gift').fadeOut();
				});

				// room main operate box ask button
				$('.operate-box .btn-ask').on('click', function() {
					$('.mask-ques').fadeIn();
					$('#modal-ask').fadeIn();

					$('.operate-mask').fadeOut();
					$('.operate-box').removeClass('active');
				});

				// ask modal back room button
				$('#modal-ask .btn-back-room').on('click', function() {
					$('.mask-ques').fadeOut();
					$('#modal-ask').fadeOut();
				});

				// room header question button
				$('.room-header .ques-num .ques').on('click', function() {
					$('.mask-ques').fadeIn();
					$('#modal-question').fadeIn();
				});

				// question modal back room button
				$('#modal-question .btn-back-room').on('click', function() {
					$('.mask-ques').fadeOut();
					$('#modal-question').fadeOut();
				});

				// question modal ask button
				$('#modal-question .ques-question .question-list .list-tab .btn-ask').on('click', function() {
					$('#modal-question').fadeOut();
					$('#modal-ask').fadeIn();
				});

				// question modal tabs button
				$('#modal-question .ques-question .question-list .list-tab .tabs a').on('click', function() {
					if($(this).hasClass('active')) {
						return false;
					} else {
						$(this).addClass('active').siblings().removeClass('active');
					}
				});

				// modal ask textarea change
				$('#modal-ask .ques-ask .areabox textarea').bind('input propertychange', function() {
					var textVal = $(this).val();
					textVal = textVal.trim();

					if(textVal != '') {
						$(this).parent().find('.btn-ask').removeClass('ask-disable');
					} else {
						$(this).parent().find('.btn-ask').addClass('ask-disable');
					}
				});

				// modal live button
				$('.mask-modal-live .live-box .btnbox a').on('click', function() {
					$('.mask-live').fadeOut();
					$('.mask-modal-live').fadeOut();

					if($(this).hasClass('btn-front')) {
						//从第一条听

					} else if($(this).hasClass('btn-end')) {
						// 收听最后一条

					}
				});

				// modal live close button
				$('.mask-modal-live .btn-close').on('click', function() {
					$('.mask-live').fadeOut();
					$('.mask-modal-live').fadeOut();
				});
			});
		</script>
	</body>
</html>

